import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Form, Input, Button, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { getLogin } from "../../api/login";
import {
  validator_username,
  validator_password,
} from "../../plugins/validator";
import { setToken } from "../../plugins/session";
import { setUser } from "../../plugins/local";
class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
      login_loading: false,
      login_text: "登录",
      login_disabled: true,
    };
  }
  // 登录按钮
  onFinish = async (values) => {
    this.setState({
      login_text: "登陆中",
      login_loading: true,
    });
    try {
      let { data: res } = await getLogin(values);
      message.success(res.msg);
      this.setState({
        login_text: "登陆成功",
        login_loading: false,
      });
      // 用户名保存到local中
      setUser(res.username);
      // token保存到session中
      setToken(res.token);
      this.props.history.push("/home");
    } catch (error) {
      console.log(error);
      message.warning("用户名或密码不正确");
      this.setState({
        login_text: "重新登录",
        login_loading: false,
      });
    }
  };
  userInput = (e) => {
    let value = e.target.value;
    this.setState({
      username: value,
    });
  };
  pwdInput = (e) => {
    let value = e.target.value;
    this.setState({
      password: value,
    });
  };

  render() {
    let {
      username,
      password,
      login_loading,
      login_text,
      login_disabled,
    } = this.state;
    const that = this;
    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={this.onFinish}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: "用户名不能为空",
            },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (validator_username(value)) {
                  if (getFieldValue("password")) {
                    that.setState({
                      login_disabled: false,
                    });
                  }
                  return Promise.resolve();
                }
                return Promise.reject("请输入4-10位用户名");
              },
            }),
          ]}
        >
          <Input
            value={username}
            onChange={this.userInput}
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="Username"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: "密码不能为空",
            },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (validator_password(value)) {
                  if (getFieldValue("username")) {
                    that.setState({
                      login_disabled: false,
                    });
                  }
                  return Promise.resolve();
                }
                return Promise.reject("请输入6-10位密码");
              },
            }),
          ]}
        >
          <Input
            value={password}
            onChange={this.pwdInput}
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            block
            loading={login_loading}
            disabled={login_disabled}
          >
            {login_text}
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default withRouter(LoginForm);
